<template>
  <div id="commentMsg" class="commentMsg">
    <div v-if="isEmpty(commentList)" class="head-message">暂无跟进内容</div>
    <comment
      @handleReply="handleReply"
      v-for="(item1, index) in commentList"
      :key="index"
      :comment="item1"
      @showBusiness="showBusiness"
      @showContacts="showContacts"
    />
    <p v-if="commentList.length>0" style="text-align: center;margin: 10px 0 0 0; color: #c3c3c3;">
      {{isLoading?'加载中':(isLast?'没有更多了':'加载更多')}}
    </p>
  </div>
</template>

<script>
import Comment from "./Comment";
import { getAction } from '@/services/manage'
import { OPERATOR } from '@/store/mutation-types'
import { filterObj } from '@/utils/util'
import Criteria from '@/utils/criteria'
export default {
  name: "CommentMessage",
  components: {
    Comment,
  },
  props: {
    category:String,
    typesId:String,
  },
  data() {
    return {
      url: {
        getFollowup: '/followup/list',
        create: '/followup/add',
      },
      commentList:[],
      pageNo:1,
      isLast : false,
      isLoading : false
    }
  },
  mounted(){
    this.listeningScroll();
  },
  methods: {
    isEmpty(ls) {
      return ls.length === 0;
    },
    handleReply(data) {
      this.$emit("handleReply", {
          msgId: data.msgId,
          msgUsername: data.msgUsername
      });
    },
    showBusiness(record){
      //this.$refs.followupBusinessDetail.open(record)
    },
    showContacts(record){
      //this.$refs.followupContactsDetail.open(record)
    },
    listeningScroll(){
      const that = this;
      let contener = document.querySelector("#commentMsg");
      let contenerHeight = contener.clientHeight;
      contener.addEventListener('scroll',function (event) {
        let scrollHeight = this.scrollHeight,
          scrollTop = this.scrollTop;
        if(contenerHeight + scrollTop + 20 >= scrollHeight && !that.isLoading && !that.isLast){
            that.loadFollowupRecord().then(res=>{
            })
        }
      });
      this.loadFollowupRecord();
    },
    loadFollowupRecord(isReload){
      const that = this;
      that.isLoading = true;
      isReload?(this.pageNo = 1,document.querySelector("#commentMsg").scrollTop= 0):'';
      return new Promise((resolve,reject)=>{
          // 获取跟进信息
          const params = {
              category:this.category,
              typesId:this.typesId,
          };
          const isorter = {
              fieldName: 'createTime',
              desc: true
          };
          const queryParam = new Criteria()
          queryParam.addCriterions(params, OPERATOR.EQ)// 过滤参数转换为jpa支持格式
          queryParam.addOrder(isorter)
          var param = Object.assign({}, { criteria: queryParam.getEncode() })
          param.pageNo = this.pageNo
          param.pageSize = 5

          getAction(that.url.getFollowup, filterObj(param)).then(res => {
              let { result } = res;
              if (result) {
                  that.commentList = that.pageNo==1?result.content:that.commentList.concat(result.content);
                  that.isLast = result.totalPages<=params.pageSize*that.pageNo;
                  that.pageNo++;
              }else{
                  that.isLast = false;
              }
              that.isLoading = false;
              resolve();
          });
      })
    }
  }
}
</script>